<template>
    <div class="config-list control-config">
        <slot name="title" />
        <div class="config-list-header bg-e">
            <span class="common-placeholder" />
            <span class="flex-1 pdl-10 border-r-1">配置项</span>
            <span class="flex-1 pdl-10">值</span>
        </div>
        <template v-if="channelSettings.length">
            <tree-folder ref="treeFolders" :configList="channelSettings" :formData="configFormData" :disabled="disabled" />
        </template>
        <template v-else>
            <div class="no-data">
                <img src="@/assets/common/nosearch.png" class="no-data-img" alt="暂无数据" />
                <p class="f12">无匹配结果</p>
            </div>
        </template>
    </div>
</template>

<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import { Prop } from 'vue-property-decorator';
// import apiUrl from '@/api/config-center/channelOrganization'
import { Dictionary } from '@/typings';
// const SHOW_TYPE = {
//   '1': 'input',
//   '2': 'number',
//   '3': 'datePick',
//   '4': 'checkbox',
//   '5': 'select',
//   '6': 'mulitSelect'
// }
@Component({
    name: 'control-config',
    components: {
        treeFolder: () => import('./tree-folder.vue')
    }
})
export default class detail extends Vue {
    @Prop({ required: true }) disabled: boolean;
    @Prop({ required: true }) channelSettings: any[];
    @Prop({ required: true }) configFormData: Dictionary;
}
</script>

<style lang="scss" scoped>
.config-list {
    padding-bottom: 15px;
    // min-height: calc(100vh - 148px);
    &-box {
        height: auto;
        transition: height 0.5s ease;
    }
    &-header {
        height: 28px;
        line-height: 28px;
        display: flex;
        font-size: 12px;
        border: 1px solid #eee;
        border-bottom: none;
    }
    .common-placeholder {
        width: 32px;
        line-height: 28px;
        text-align: center;
        transition: all 0.5s;
    }
    .bg-e {
        background: #eee;
    }
}
</style>
